<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1967839529905684480/resource_152810000.js"></script> 
  <link href="./1967839529905684480/all.min.css" rel="stylesheet"> 
  <script src="./1967839529905684480/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside id="sidebar" class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <div class="menu-group">
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1181&amp;h=762&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-pe1s4" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-calendar-check text-lg mr-3"> </i> 
        <span class="" contenteditable="false" style="outline: none;"> 工作台 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1170&amp;h=728&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="announcements" data-selectorname="#id-wgtje" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-bullhorn text-lg mr-3"> </i> 
        <span> 公司公告 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-announcements"> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <div class="menu-item menu-item-active flex justify-between" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-planning" data-ytextravalue="extra-zxta73ltx"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1969787710210048000&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="0" data-ytindex="0" data-ytparentvalue="extra-zxta73ltx"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-3a1t9" style> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span style> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1390&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969803110087917568&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="1" data-ytindex="1" data-ytparentvalue="extra-zxta73ltx"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-1ztzd" style> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-selectorname="#id-ck0n6" data-ytparentvalue="extra-zxta73ltx" data-ytoriginindex="2" data-ytindex="2"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-kothc" style> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span data-selectorname="span"> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="3" data-ytindex="3" data-ytparentvalue="extra-zxta73ltx"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-itxzi" style> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span style> 营销计划 </span> 
       </div> </a> 
      <div class="submenu-item submenu-item-active" data-page="customer-records" data-ytoriginindex="4" data-ytindex="4"> 
       <i class="fas fa-users text-xs mr-2"> </i> 
       <span> 客户档案 </span> 
      </div> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="5" data-ytindex="5"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-m8n7d" style> 
        <i class="fas fa-trophy text-xs mr-2"> </i> 
        <span> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="work"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-work"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-k0t19" style> 
        <i class="fas fa-chart-bar text-xs mr-2"> </i> 
        <span> 周日报管理 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-zis1o" style> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-kmr12" style> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span style> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-learning" data-ytextravalue="extra-h4wlsilz2"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1113&amp;h=728&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968967895824203776&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-selectorname="#id-0ntz5" data-ytparentvalue="extra-h4wlsilz2" data-ytoriginindex="0" data-ytindex="0"> 
       <div class="submenu-item" data-page="company-culture" data-selectorname="#id-lz5v6" style> 
        <i class="fas fa-building text-xs mr-2"> </i> 
        <span> 企业文化 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-ak2hh" style> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="2" data-ytindex="2"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-ghhk4" style> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="3" data-ytindex="3"> 
       <div class="submenu-item" data-page="learning-plan" data-selectorname="#id-369ht" style> 
        <i class="fas fa-clipboard-list text-xs mr-2"> </i> 
        <span> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-twe7n" style> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-53n7j" style> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden" data-ytextravalue="extra-0hg6944vt"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10" data-ytoriginindex="0" data-ytindex="0"> 
    <div class="flex items-center"> 
     <button id="toggle-sidebar" class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 年规管理 </span> 
      <i class="fas fa-angle-right mx-2 text-xs"> </i> 
      <span> 客户档案 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img src="./1967839529905684480/f48e4ae6256cb09fa61d11486866b14f.png" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area" data-ytparentvalue="extra-0hg6944vt" data-ytoriginindex="1" data-ytindex="1"> 
    <!-- 客户档案页面 --> 
    <div class="page active" id="page-customer-records"> 
     <div class="flex justify-between items-center mb-6"> 
      <h2 class="text-2xl font-bold"> 客户档案 </h2> 
      <div class="flex space-x-3"> 
       <button class="btn-primary" id="add-customer-btn"> <i class="fas fa-plus mr-2"> </i> 新增客户 </button> 
       <button class="btn-secondary" id="import-customers-btn"> <i class="fas fa-upload mr-2"> </i> 导入客户 </button> 
       <button class="btn-outline" id="export-customers-btn"> <i class="fas fa-download mr-2"> </i> 导出 </button> 
      </div> 
     </div> 
     <!-- 客户统计卡片 --> 
     <div class="grid grid-cols-12 gap-6 mb-6"> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5"> 
       <div class="text-text-tertiary text-sm mb-2">
         总客户数 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 248 </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 12% </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          同比增长 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-primary mt-2"> 
       </div> 
      </div> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5"> 
       <div class="text-text-tertiary text-sm mb-2">
         年度新增客户 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 186 </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 8% </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          同比增长 
        </div> 
       </div> 
       <div class="w-full bg-neutral rounded-full h-2 mb-1"> 
        <div class="bg-primary h-2 rounded-full" style="width: 75%"> 
        </div> 
       </div> 
       <div class="flex justify-between text-xs text-text-tertiary"> 
        <span> 占比: 75% </span> 
        <span> 同比去年+2% </span> 
       </div> 
      </div> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5"> 
       <div class="text-text-tertiary text-sm mb-2">
         老客户数 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 62 </span> 
         <span class="text-red-500 text-sm ml-2"> <i class="fas fa-arrow-down"> </i> 3% </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          同比变化 
        </div> 
       </div> 
       <div class="w-full bg-neutral rounded-full h-2 mb-1"> 
        <div class="bg-secondary h-2 rounded-full" style="width: 25%"> 
        </div> 
       </div> 
       <div class="flex justify-between text-xs text-text-tertiary"> 
        <span> 占比: 25% </span> 
        <span> 同比去年-1% </span> 
       </div> 
      </div> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5"> 
       <div class="text-text-tertiary text-sm mb-2">
         客户转化率 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 32% </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 5% </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          同比增长 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-primary mt-2"> 
        <i class="fas fa-info-circle mr-1"> </i> 
        <span> 目标: 35% </span> 
       </div> 
      </div> 
     </div> 
     <!-- 客户搜索和筛选 --> 
     <div class="bg-white rounded-lg card-shadow mb-6 overflow-hidden"> 
      <div class="p-5 border-b border-neutral-dark"> 
       <div class="grid grid-cols-12 gap-4"> 
        <div class="col-span-3"> 
         <label class="block text-sm font-medium text-text-secondary mb-1"> 客户名称 </label> 
         <input type="text" placeholder="请输入客户名称" class="input-field"> 
        </div> 
        <div class="col-span-2"> 
         <label class="block text-sm font-medium text-text-secondary mb-1"> 客户类型 </label> 
         <select class="input-field"> <option value> 全部类型 </option> <option value="new"> 新客户 </option> <option value="old"> 老客户 </option> </select> 
        </div> 
        <div class="col-span-2"> 
         <label class="block text-sm font-medium text-text-secondary mb-1"> 客户等级 </label> 
         <select class="input-field"> <option value> 全部等级 </option> <option value="vip"> VIP客户 </option> <option value="important"> 重要客户 </option> <option value="ordinary"> 普通客户 </option> <option value="potential"> 潜在客户 </option> </select> 
        </div> 
        <div class="col-span-2"> 
         <label class="block text-sm font-medium text-text-secondary mb-1"> 所属国别 </label> 
         <select class="input-field"> <option value> 全部国别 </option> <option value="china"> 中国 </option> <option value="usa"> 美国 </option> <option value="uk"> 英国 </option> <option value="japan"> 日本 </option> <option value="germany"> 德国 </option> <option value="france"> 法国 </option> <option value="australia"> 澳大利亚 </option> <option value="other"> 其他国家 </option> </select> 
        </div> 
        <div class="col-span-2"> 
         <label class="block text-sm font-medium text-text-secondary mb-1"> 跟进状态 </label> 
         <select class="input-field"> <option value> 全部状态 </option> <option value="pending"> 待跟进 </option> <option value="following"> 跟进中 </option> <option value="cooperating"> 合作中 </option> <option value="suspended"> 已暂停 </option> <option value="terminated"> 已终止 </option> </select> 
        </div> 
        <div class="col-span-1 flex items-end"> 
         <button class="btn-primary w-full"> 搜索 </button> 
        </div> 
       </div> 
      </div> 
      <!-- 客户列表表格 --> 
      <div class="overflow-x-auto"> 
       <table class="w-full"> 
        <thead> 
         <tr> 
          <th class="table-header text-left w-12"> <input type="checkbox" class="rounded text-primary focus:ring-primary"> </th> 
          <th class="table-header text-left"> 客户名称 </th> 
          <th class="table-header text-left"> 联系人 </th> 
          <th class="table-header text-left"> 联系方式 </th> 
          <th class="table-header text-left"> 客户类型 </th> 
          <th class="table-header text-left"> 客户等级 </th> 
          <th class="table-header text-left"> 所属国家 </th> 
          <th class="table-header text-left"> 跟进状态 </th> 
          <th class="table-header text-left"> 最近跟进 </th> 
          <th class="table-header text-left"> 操作 </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="table-row"> 
          <td class="px-4 py-4"> <input type="checkbox" class="rounded text-primary focus:ring-primary"> </td> 
          <td class="px-4 py-4"> 
           <div class="font-medium">
             北京科技有限公司 
           </div> 
           <div class="text-sm text-text-secondary mt-1">
             客户编号: C-2023001 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div class="flex items-center"> 
            <img src="./1967839529905684480/d4aa4eb9ba9d9eee3e079312b8ebf5b2.png" alt="联系人头像" class="w-6 h-6 rounded-full object-cover mr-2"> 
            <div> 
             <div>
               刘经理 
             </div> 
             <div class="text-xs text-text-tertiary">
               技术总监 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div>
             13800138000 
           </div> 
           <div class="text-xs text-text-tertiary">
             liujingli@example.com 
           </div> </td> 
          <td class="px-4 py-4"> <span class="badge badge-info"> 新客户 </span> </td> 
          <td class="px-4 py-4"> <span class="badge badge-purple"> VIP客户 </span> </td> 
          <td class="px-4 py-4"> 中国 </td> 
          <td class="px-4 py-4"> <span class="badge badge-success"> 合作中 </span> </td> 
          <td class="px-4 py-4"> 2023-06-10 </td> 
          <td class="px-4 py-4"> 
           <div class="flex space-x-2"> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="查看详情"> <i class="fas fa-eye"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="编辑"> <i class="fas fa-edit"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="跟进记录"> <i class="fas fa-history"> </i> </button> 
            <button class="text-text-secondary hover:text-red-500 transition-colors duration-200" title="删除"> <i class="fas fa-trash"> </i> </button> 
           </div> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-4"> <input type="checkbox" class="rounded text-primary focus:ring-primary"> </td> 
          <td class="px-4 py-4"> 
           <div class="font-medium">
             上海创新集团 
           </div> 
           <div class="text-sm text-text-secondary mt-1">
             客户编号: C-2023002 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div class="flex items-center"> 
            <img src="./1967839529905684480/515c7bc3efe9d3b8d472b459233c29b1.png" alt="联系人头像" class="w-6 h-6 rounded-full object-cover mr-2"> 
            <div> 
             <div>
               陈总监 
             </div> 
             <div class="text-xs text-text-tertiary">
               采购总监 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div>
             13900139000 
           </div> 
           <div class="text-xs text-text-tertiary">
             chenzongjian@example.com 
           </div> </td> 
          <td class="px-4 py-4"> <span class="badge badge-info"> 老客户 </span> </td> 
          <td class="px-4 py-4"> <span class="badge badge-purple"> 重要客户 </span> </td> 
          <td class="px-4 py-4"> 美国 </td> 
          <td class="px-4 py-4"> <span class="badge badge-success"> 合作中 </span> </td> 
          <td class="px-4 py-4"> 2023-06-15 </td> 
          <td class="px-4 py-4"> 
           <div class="flex space-x-2"> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="查看详情"> <i class="fas fa-eye"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="编辑"> <i class="fas fa-edit"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="跟进记录"> <i class="fas fa-history"> </i> </button> 
            <button class="text-text-secondary hover:text-red-500 transition-colors duration-200" title="删除"> <i class="fas fa-trash"> </i> </button> 
           </div> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-4"> <input type="checkbox" class="rounded text-primary focus:ring-primary"> </td> 
          <td class="px-4 py-4"> 
           <div class="font-medium">
             广州未来科技有限公司 
           </div> 
           <div class="text-sm text-text-secondary mt-1">
             客户编号: C-2023003 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div class="flex items-center"> 
            <img src="./1967839529905684480/d63fa6ff2f9f3c3d22abb888c18c7660.png" alt="联系人头像" class="w-6 h-6 rounded-full object-cover mr-2"> 
            <div> 
             <div>
               黄经理 
             </div> 
             <div class="text-xs text-text-tertiary">
               项目经理 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div>
             13700137000 
           </div> 
           <div class="text-xs text-text-tertiary">
             huangjingli@example.com 
           </div> </td> 
          <td class="px-4 py-4"> <span class="badge badge-info"> 老客户 </span> </td> 
          <td class="px-4 py-4"> <span class="badge badge-purple"> 普通客户 </span> </td> 
          <td class="px-4 py-4"> 英国 </td> 
          <td class="px-4 py-4"> <span class="badge badge-warning"> 跟进中 </span> </td> 
          <td class="px-4 py-4"> 2023-06-12 </td> 
          <td class="px-4 py-4"> 
           <div class="flex space-x-2"> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="查看详情"> <i class="fas fa-eye"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="编辑"> <i class="fas fa-edit"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="跟进记录"> <i class="fas fa-history"> </i> </button> 
            <button class="text-text-secondary hover:text-red-500 transition-colors duration-200" title="删除"> <i class="fas fa-trash"> </i> </button> 
           </div> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-4"> <input type="checkbox" class="rounded text-primary focus:ring-primary"> </td> 
          <td class="px-4 py-4"> 
           <div class="font-medium">
             深圳智慧系统有限公司 
           </div> 
           <div class="text-sm text-text-secondary mt-1">
             客户编号: C-2023004 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div class="flex items-center"> 
            <img src="./1967839529905684480/bba23559faae16c5446b9527449f9327.png" alt="联系人头像" class="w-6 h-6 rounded-full object-cover mr-2"> 
            <div> 
             <div>
               吴总 
             </div> 
             <div class="text-xs text-text-tertiary">
               总经理 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div>
             13600136000 
           </div> 
           <div class="text-xs text-text-tertiary">
             wuzong@example.com 
           </div> </td> 
          <td class="px-4 py-4" data-ytextravalue="extra-l8z81h8cp"> <span class="badge badge-info" data-ytparentvalue="extra-l8z81h8cp" data-ytoriginindex="0" data-ytindex="0"> 新客户 </span> </td> 
          <td class="px-4 py-4"> <span class="badge badge-purple"> VIP客户 </span> </td> 
          <td class="px-4 py-4"> 日本 </td> 
          <td class="px-4 py-4"> <span class="badge badge-success"> 合作中 </span> </td> 
          <td class="px-4 py-4"> 2023-06-08 </td> 
          <td class="px-4 py-4"> 
           <div class="flex space-x-2"> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="查看详情"> <i class="fas fa-eye"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="编辑"> <i class="fas fa-edit"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="跟进记录"> <i class="fas fa-history"> </i> </button> 
            <button class="text-text-secondary hover:text-red-500 transition-colors duration-200" title="删除"> <i class="fas fa-trash"> </i> </button> 
           </div> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-4"> <input type="checkbox" class="rounded text-primary focus:ring-primary"> </td> 
          <td class="px-4 py-4"> 
           <div class="font-medium">
             杭州创新科技工作室 
           </div> 
           <div class="text-sm text-text-secondary mt-1">
             客户编号: C-2023005 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div class="flex items-center"> 
            <img src="./1967839529905684480/d7eac057e8b462ab3d52b07a5e83f4cd.png" alt="联系人头像" class="w-6 h-6 rounded-full object-cover mr-2"> 
            <div> 
             <div>
               郑先生 
             </div> 
             <div class="text-xs text-text-tertiary">
               创始人 
             </div> 
            </div> 
           </div> </td> 
          <td class="px-4 py-4"> 
           <div>
             13500135000 
           </div> 
           <div class="text-xs text-text-tertiary">
             zhengxiansheng@example.com 
           </div> </td> 
          <td class="px-4 py-4"> <span class="badge badge-info"> 新客户 </span> </td> 
          <td class="px-4 py-4"> <span class="badge badge-purple"> 潜在客户 </span> </td> 
          <td class="px-4 py-4"> 德国 </td> 
          <td class="px-4 py-4"> <span class="badge badge-warning"> 跟进中 </span> </td> 
          <td class="px-4 py-4"> 2023-06-18 </td> 
          <td class="px-4 py-4"> 
           <div class="flex space-x-2"> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="查看详情"> <i class="fas fa-eye"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="编辑"> <i class="fas fa-edit"> </i> </button> 
            <button class="text-text-secondary hover:text-primary transition-colors duration-200" title="跟进记录"> <i class="fas fa-history"> </i> </button> 
            <button class="text-text-secondary hover:text-red-500 transition-colors duration-200" title="删除"> <i class="fas fa-trash"> </i> </button> 
           </div> </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div class="p-5 border-t border-neutral-dark flex justify-between items-center"> 
       <div class="text-sm text-text-tertiary">
         显示 1 至 5 条，共 248 条 
       </div> 
       <div class="flex space-x-1"> 
        <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:border-primary hover:text-primary transition-colors duration-200" disabled> <i class="fas fa-chevron-left text-xs"> </i> </button> 
        <button class="w-9 h-9 flex items-center justify-center rounded bg-primary text-white"> 1 </button> 
        <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> 2 </button> 
        <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> 3 </button> 
        <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> ... </button> 
        <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> 50 </button> 
        <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"> <i class="fas fa-chevron-right text-xs"> </i> </button> 
       </div> 
      </div> 
     </div> 
     <!-- 客户分布与待跟进客户 --> 
     <div class="grid grid-cols-12 gap-6 mb-6"> 
      <!-- 客户分布图表 --> 
      <div class="col-span-7 bg-white rounded-lg card-shadow overflow-hidden"> 
       <div class="p-5 border-b border-neutral-dark flex justify-between items-center"> 
        <h3 class="font-semibold"> 客户分布 </h3> 
        <div class="flex space-x-2"> 
         <button class="btn-outline text-sm py-1 px-3 active"> 客户类型 </button>
         <button class="btn-outline text-sm py-1 px-3"> 客户等级 </button> 
         <button class="btn-outline text-sm py-1 px-3"> 地区分布 </button>
        </div> 
       </div> 
       <div class="p-5"> 
        <div class="grid grid-cols-2 gap-6"> 
         <div id="customer-industry-chart" class="w-full h-64"> 
         </div> 
         <div class="space-y-4"> 
          <div class="flex items-center justify-between p-3 border-b border-neutral-dark"> 
           <div class="flex items-center"> 
            <div class="w-3 h-3 rounded-full bg-primary mr-3"> 
            </div> 
            <span> 中国 </span> 
           </div> 
           <div class="text-right"> 
            <div class="font-medium">
              86 
            </div> 
            <div class="text-xs text-text-tertiary">
              34.7% 
            </div> 
           </div> 
          </div> 
          <div class="flex items-center justify-between p-3 border-b border-neutral-dark"> 
           <div class="flex items-center"> 
            <div class="w-3 h-3 rounded-full bg-secondary mr-3"> 
            </div> 
            <span> 美国 </span> 
           </div> 
           <div class="text-right"> 
            <div class="font-medium">
              52 
            </div> 
            <div class="text-xs text-text-tertiary">
              21.0% 
            </div> 
           </div> 
          </div> 
          <div class="flex items-center justify-between p-3 border-b border-neutral-dark"> 
           <div class="flex items-center"> 
            <div class="w-3 h-3 rounded-full bg-green-500 mr-3"> 
            </div> 
            <span> 英国 </span> 
           </div> 
           <div class="text-right"> 
            <div class="font-medium">
              45 
            </div> 
            <div class="text-xs text-text-tertiary">
              18.1% 
            </div> 
           </div> 
          </div> 
          <div class="flex items-center justify-between p-3 border-b border-neutral-dark"> 
           <div class="flex items-center"> 
            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-3"> 
            </div> 
            <span> 法国 </span> 
           </div> 
           <div class="text-right"> 
            <div class="font-medium">
              32 
            </div> 
            <div class="text-xs text-text-tertiary">
              12.9% 
            </div> 
           </div> 
          </div> 
          <div class="flex items-center justify-between p-3 border-b border-neutral-dark"> 
           <div class="flex items-center"> 
            <div class="w-3 h-3 rounded-full bg-purple-500 mr-3"> 
            </div> 
            <span> 德国 </span> 
           </div> 
           <div class="text-right"> 
            <div class="font-medium">
              23 
            </div> 
            <div class="text-xs text-text-tertiary">
              9.3% 
            </div> 
           </div> 
          </div> 
          <div class="flex items-center justify-between p-3"> 
           <div class="flex items-center"> 
            <div class="w-3 h-3 rounded-full bg-red-500 mr-3"> 
            </div> 
            <span> 其他 </span> 
           </div> 
           <div class="text-right"> 
            <div class="font-medium">
              10 
            </div> 
            <div class="text-xs text-text-tertiary">
              4.0% 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- 待跟进客户 --> 
      <div class="col-span-5 bg-white rounded-lg card-shadow overflow-hidden"> 
       <div class="p-5 border-b border-neutral-dark flex justify-between items-center"> 
        <h3 class="font-semibold"> 待跟进客户 </h3> 
        <button class="text-primary text-sm hover:underline"> 查看全部 </button> 
       </div> 
       <div class="p-5 space-y-4 max-h-96 overflow-y-auto scrollbar-hide"> 
        <!-- 待跟进客户 1 --> 
        <div class="border border-neutral-dark rounded-lg p-4 hover:border-primary transition-colors duration-200 cursor-pointer"> 
         <div class="flex justify-between items-start mb-2"> 
          <div class="font-medium">
            广州未来科技有限公司 
          </div> 
          <span class="badge badge-danger"> 已逾期 </span> 
         </div> 
         <div class="text-sm text-text-secondary mb-3">
           项目合作方案确认与报价沟通 
         </div> 
         <div class="flex justify-between items-center text-xs text-text-tertiary mb-3"> 
          <div class="flex items-center"> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 黄经理 </span> 
          </div> 
          <div class="flex items-center"> 
           <i class="fas fa-phone mr-1"> </i> 
           <span> 13700137000 </span> 
          </div> 
         </div> 
         <div class="flex justify-between items-center"> 
          <div class="text-xs text-red-500 flex items-center"> 
           <i class="fas fa-clock mr-1"> </i> 
           <span> 计划跟进: 2023-06-12 </span> 
          </div> 
          <button class="btn-primary text-xs py-1 px-3"> 立即跟进 </button> 
         </div> 
        </div> 
        <!-- 待跟进客户 2 --> 
        <div class="border border-neutral-dark rounded-lg p-4 hover:border-primary transition-colors duration-200 cursor-pointer"> 
         <div class="flex justify-between items-start mb-2"> 
          <div class="font-medium">
            杭州创新科技工作室 
          </div> 
          <span class="badge badge-warning"> 今日跟进 </span> 
         </div> 
         <div class="text-sm text-text-secondary mb-3">
           产品演示与需求收集 
         </div> 
         <div class="flex justify-between items-center text-xs text-text-tertiary mb-3"> 
          <div class="flex items-center"> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 郑先生 </span> 
          </div> 
          <div class="flex items-center"> 
           <i class="fas fa-phone mr-1"> </i> 
           <span> 13500135000 </span> 
          </div> 
         </div> 
         <div class="flex justify-between items-center"> 
          <div class="text-xs text-text-tertiary flex items-center"> 
           <i class="fas fa-clock mr-1"> </i> 
           <span> 计划跟进: 2023-06-20 </span> 
          </div> 
          <button class="btn-primary text-xs py-1 px-3"> 立即跟进 </button> 
         </div> 
        </div> 
        <!-- 待跟进客户 3 --> 
        <div class="border border-neutral-dark rounded-lg p-4 hover:border-primary transition-colors duration-200 cursor-pointer"> 
         <div class="flex justify-between items-start mb-2"> 
          <div class="font-medium">
            成都智慧教育有限公司 
          </div> 
          <span class="badge badge-warning"> 明日跟进 </span> 
         </div> 
         <div class="text-sm text-text-secondary mb-3">
           教育信息化解决方案沟通 
         </div> 
         <div class="flex justify-between items-center text-xs text-text-tertiary mb-3"> 
          <div class="flex items-center"> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 林校长 </span> 
          </div> 
          <div class="flex items-center"> 
           <i class="fas fa-phone mr-1"> </i> 
           <span> 13900139001 </span> 
          </div> 
         </div> 
         <div class="flex justify-between items-center"> 
          <div class="text-xs text-text-tertiary flex items-center"> 
           <i class="fas fa-clock mr-1"> </i> 
           <span> 计划跟进: 2023-06-21 </span> 
          </div> 
          <button class="btn-primary text-xs py-1 px-3"> 立即跟进 </button> 
         </div> 
        </div> 
        <!-- 待跟进客户 4 --> 
        <div class="border border-neutral-dark rounded-lg p-4 hover:border-primary transition-colors duration-200 cursor-pointer"> 
         <div class="flex justify-between items-start mb-2"> 
          <div class="font-medium">
            武汉医疗设备有限公司 
          </div> 
          <span class="badge badge-info"> 3天后跟进 </span> 
         </div> 
         <div class="text-sm text-text-secondary mb-3">
           医疗信息化系统需求分析 
         </div> 
         <div class="flex justify-between items-center text-xs text-text-tertiary mb-3"> 
          <div class="flex items-center"> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 张总监 </span> 
          </div> 
          <div class="flex items-center"> 
           <i class="fas fa-phone mr-1"> </i> 
           <span> 13800138001 </span> 
          </div> 
         </div> 
         <div class="flex justify-between items-center"> 
          <div class="text-xs text-text-tertiary flex items-center"> 
           <i class="fas fa-clock mr-1"> </i> 
           <span> 计划跟进: 2023-06-23 </span> 
          </div> 
          <button class="btn-primary text-xs py-1 px-3"> 立即跟进 </button> 
         </div> 
        </div> 
        <!-- 待跟进客户 5 --> 
        <div class="border border-neutral-dark rounded-lg p-4 hover:border-primary transition-colors duration-200 cursor-pointer"> 
         <div class="flex justify-between items-start mb-2"> 
          <div class="font-medium">
            南京零售连锁集团 
          </div> 
          <span class="badge badge-info"> 5天后跟进 </span> 
         </div> 
         <div class="text-sm text-text-secondary mb-3">
           新零售系统方案演示 
         </div> 
         <div class="flex justify-between items-center text-xs text-text-tertiary mb-3"> 
          <div class="flex items-center"> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 王经理 </span> 
          </div> 
          <div class="flex items-center"> 
           <i class="fas fa-phone mr-1"> </i> 
           <span> 13600136001 </span> 
          </div> 
         </div> 
         <div class="flex justify-between items-center"> 
          <div class="text-xs text-text-tertiary flex items-center"> 
           <i class="fas fa-clock mr-1"> </i> 
           <span> 计划跟进: 2023-06-25 </span> 
          </div> 
          <button class="btn-primary text-xs py-1 px-3"> 立即跟进 </button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-monthly-tasks"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
    </div> 
    <div class="page hidden" id="page-performance-entry"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-pk-activities"> 
    </div> 
   </div> 
  </main> 
  <!-- 新增客户弹窗 --> 
  <div id="add-customer-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> 
   <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"> 
    <div class="p-5 border-b border-neutral-dark flex justify-between items-center sticky top-0 bg-white z-10"> 
     <h3 class="text-lg font-semibold"> 新增客户 </h3> 
     <button id="close-add-customer-modal" class="text-text-secondary hover:text-text-primary transition-colors duration-200"> <i class="fas fa-times text-xl"> </i> </button> 
    </div> 
    <div class="p-5"> 
     <form id="add-customer-form"> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 客户名称 <span class="text-red-500"> * </span> </label> 
        <input type="text" class="input-field" placeholder="请输入客户名称" required> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 客户编号 </label> 
        <input type="text" class="input-field" placeholder="系统自动生成" disabled> 
       </div> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 客户类型 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择客户类型 </option> <option value="enterprise"> 企业客户 </option> <option value="individual"> 个人客户 </option> <option value="partner"> 合作伙伴 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 客户等级 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择客户等级 </option> <option value="vip"> VIP客户 </option> <option value="important"> 重要客户 </option> <option value="ordinary"> 普通客户 </option> <option value="potential"> 潜在客户 </option> </select> 
       </div> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 所属行业 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择所属行业 </option> <option value="it"> IT/互联网 </option> <option value="finance"> 金融 </option> <option value="manufacturing"> 制造业 </option> <option value="retail"> 零售 </option> <option value="education"> 教育 </option> <option value="healthcare"> 医疗健康 </option> <option value="other"> 其他 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 跟进状态 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择跟进状态 </option> <option value="pending"> 待跟进 </option> <option value="following"> 跟进中 </option> <option value="cooperating"> 合作中 </option> <option value="suspended"> 已暂停 </option> <option value="terminated"> 已终止 </option> </select> 
       </div> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 联系人姓名 <span class="text-red-500"> * </span> </label> 
        <input type="text" class="input-field" placeholder="请输入联系人姓名" required> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 联系人性别 </label> 
        <select class="input-field"> <option value> 请选择性别 </option> <option value="male"> 男 </option> <option value="female"> 女 </option> <option value="other"> 其他 </option> </select> 
       </div> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 联系电话 <span class="text-red-500"> * </span> </label> 
        <input type="tel" class="input-field" placeholder="请输入联系电话" required> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 电子邮箱 </label> 
        <input type="email" class="input-field" placeholder="请输入电子邮箱"> 
       </div> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 职位 </label> 
        <input type="text" class="input-field" placeholder="请输入联系人职位"> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 微信 </label> 
        <input type="text" class="input-field" placeholder="请输入微信号"> 
       </div> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb-1"> 客户地址 </label> 
       <textarea class="input-field" rows="2" placeholder="请输入客户详细地址">
        </textarea> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb-1"> 客户简介 </label> 
       <textarea class="input-field" rows="3" placeholder="请简要描述客户情况、规模、业务范围等">
        </textarea> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 负责人 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择负责人 </option> <option value="1" selected> 张明 </option> <option value="2"> 李华 </option> <option value="3"> 王芳 </option> <option value="4"> 赵强 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 录入日期 </label> 
        <input type="date" class="input-field" required> 
       </div> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb-1"> 客户标签 </label> 
       <div class="flex flex-wrap gap-2 mt-2"> 
        <div class="inline-flex items-center bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">
          重点客户 
         <button class="ml-2 text-primary/70 hover:text-primary"> <i class="fas fa-times-circle"> </i> </button> 
        </div> 
        <div class="inline-flex items-center bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">
          新客户 
         <button class="ml-2 text-primary/70 hover:text-primary"> <i class="fas fa-times-circle"> </i> </button> 
        </div> 
        <div class="inline-flex items-center border border-dashed border-neutral-dark px-3 py-1 rounded-full text-sm text-text-secondary hover:border-primary hover:text-primary cursor-pointer">
          + 添加标签 
        </div> 
       </div> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb-1"> 附件上传 </label> 
       <div class="border-2 border-dashed border-neutral-dark rounded-md p-6 text-center hover:border-primary transition-colors duration-200 cursor-pointer"> 
        <i class="fas fa-cloud-upload-alt text-3xl text-text-tertiary mb-2"> </i> 
        <p class="text-text-secondary mb-1"> 点击或拖拽文件至此处上传 </p> 
        <p class="text-xs text-text-tertiary"> 支持PDF、Word、Excel格式，单个文件不超过10MB </p> 
       </div> 
      </div> 
     </form> 
    </div> 
    <div class="p-5 border-t border-neutral-dark flex justify-end space-x-3 sticky bottom-0 bg-white"> 
     <button id="cancel-add-customer-btn" class="btn-outline px-6"> 取消 </button> 
     <button id="save-add-customer-btn" class="btn-primary px-6"> 保存 </button> 
    </div> 
   </div> 
  </div> 
  <script>// 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 菜单切换功能
            const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                    
                    // 添加当前菜单的活动状态
                    item.classList.add('menu-item-active'); 
                    
                    const menuId = item.getAttribute('data-menu');
                    const submenu = document.getElementById(`submenu-${menuId}`);
                    const icon = item.querySelector('i:last-child');
                    
                    // 切换子菜单显示/隐藏
                    if (submenu.classList.contains('hidden')) {
                        submenu.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                    } else {
                        submenu.classList.add('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单的活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                    
                    // 添加当前子菜单的活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `














<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');  
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                    document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) { submenu.classList.remove('hidden'); }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });
                }
            });
            
            // 初始化客户行业分布图表
            const initCustomerIndustryChart = () => {
                const chartDom = document.getElementById('customer-industry-chart');
                const myChart = echarts.init(chartDom);
                
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        show: false
                    },
                    series: [
                        {
                            name: '客户数量',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 86, name: '中国', itemStyle: { color: '#165DFF' } },
                                { value: 52, name: '英国', itemStyle: { color: '#4080FF' } },
                                { value: 45, name: '美国', itemStyle: { color: '#00B42A' } },
                                { value: 32, name: '零售', itemStyle: { color: '#FF7D00' } },
                                { value: 23, name: '教育', itemStyle: { color: '#722ED1' } },
                                { value: 10, name: '其他', itemStyle: { color: '#F53F3F' } }
                            ]
                        }
                    ]
                };
                
                option && myChart.setOption(option);
                
                // 监听窗口大小变化，调整图表大小
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            };
            
            // 初始化图表
            initCustomerIndustryChart();
            
            // 新增客户弹窗功能
            const addCustomerBtn = document.getElementById('add-customer-btn');
            const addCustomerModal = document.getElementById('add-customer-modal');
            const closeAddCustomerModal = document.getElementById('close-add-customer-modal');
            const cancelAddCustomerBtn = document.getElementById('cancel-add-customer-btn');
            const saveAddCustomerBtn = document.getElementById('save-add-customer-btn');
            
            addCustomerBtn.addEventListener('click', () => {
                addCustomerModal.classList.remove('hidden');
                // 阻止背景滚动
                document.body.style.overflow = 'hidden';
            });
            
            function closeAddCustomerModalFunc() {
                addCustomerModal.classList.add('hidden');
                // 恢复背景滚动
                document.body.style.overflow = '';
            }
            
            closeAddCustomerModal.addEventListener('click', closeAddCustomerModalFunc);
            cancelAddCustomerBtn.addEventListener('click', closeAddCustomerModalFunc);
            
            saveAddCustomerBtn.addEventListener('click', () => {
                // 这里添加表单提交逻辑
                alert('客户添加成功！');
                closeAddCustomerModalFunc();
            });
            
            // 点击模态框外部关闭
            addCustomerModal.addEventListener('click', (e) => {
                if (e.target === addCustomerModal) {
                    closeAddCustomerModalFunc();
                }
            });
            
            // 导入客户按钮点击事件
            const importCustomersBtn = document.getElementById('import-customers-btn');
            importCustomersBtn.addEventListener('click', () => {
                alert('导入客户功能即将上线，敬请期待！');
            });
            
            // 导出客户按钮点击事件
            const exportCustomersBtn = document.getElementById('export-customers-btn');
            exportCustomersBtn.addEventListener('click', () => {
                alert('正在导出客户数据，请稍候...');
            });
        });</script>  
 </body>
</html>